<template>
  <NuxtLoadingIndicator />
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="username">用户名：</label>
      <input
        id="username"
        v-model="username"
        type="text"
        placeholder="请输入用户名"
      />
    </div>
    <div>
      <label for="password">密码：</label>
      <input
        id="password"
        v-model="password"
        type="password"
        placeholder="请输入密码"
      />
    </div>
    <button type="submit">登录</button>
  </form>
</template>

<script setup lang="ts">
const username = ref("");
const password = ref("");

// 获取加载指示器实例
const loading = useLoadingIndicator();

async function handleSubmit() {
  // 启动加载效果
  loading.start();
  try {
    // 模拟一个异步登录请求，延时 2 秒返回结果
    const response = await new Promise((resolve) =>
      setTimeout(() => resolve({ success: true }), 2000)
    );
    if (response.success) {
      console.log("登录成功");
      // 这里可以继续处理登录成功后的逻辑
    } else {
      console.error("登录失败");
    }
  } catch (error) {
    console.error("请求出错：", error);
  } finally {
    // 无论成功或失败，都结束加载效果
    loading.finish();
  }
}
</script>
